<template>
  <!-- 弹窗 -->

  <view class="dialog">
  <u-popup :show="show" :round="32" mode="center" class=" md-modal md-effect-8">
    <view class="dialog-box">
      <view class="dialog-title">{{ dataToinformaion.title }}</view>
      <image class="uploadimg" :src="`${baseUrl}`+ dataToinformaion.imageSrc" 
        mode="scaleToFill"
      />
      <view class="dialog-time">{{dataToinformaion.time  }}</view>
      <view class="dialog-subtitle">{{ dataToinformaion.subtitle }}</view>
      <button class="dialog-submit" @tap="closepop"> {{ dataToinformaion.dialogButton }} </button>
    </view>
  </u-popup>
  
</view>

</template>

<script setup>
import { baseUrl } from '@/sheep/config';
const emits = defineEmits(['closepop','closeModel']);
const props = defineProps({
show: {
    type: Boolean,
    default: false
  },
dataToinformaion: {
    type: Object,
    default() {
        return {};
      },
  }
});
 //点击事件
function closepop(){
emits('closepop', false)
return;
}

</script>

<style scoped lang="scss">
/* //弹窗 */
.dialog{
.dialog-box{
  height: 49%;
  width: 640rpx;
  text-align: center;
  .dialog-title{
    padding-top: 40rpx;
    padding-left: 30rpx;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 40rpx;
    text-align: left;
  }
  image{
    width: 266rpx;
    height: 156rpx;
    margin: 50rpx auto 30rpx auto;
  }
  .dialog-time{
     font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 40rpx;;
  }
  .dialog-subtitle{
    width: 80%;
    margin: 10rpx auto 50rpx auto;
    font-family: PingFangSC;
    color: #666666;
    font-weight: 500;
    font-size: $uni-font-size-base;
    line-height: 1.5;
  }
  .dialog-submit{
    width: 240rpx;
    height: 90rpx;
    margin-bottom: 38rpx;
    font-family: PingFangSC;
    color: #FFFFFF;
    font-weight: $uni-font-weight;
    font-size: 34rpx;

    border-radius: 50rpx;
    background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
  }
}
}
:deep(.u-popup){
position: relative;
.u-icon__icon{background:transparent;}
}
.md-modal {
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	// visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-8 .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-70deg);
	-moz-transform: rotateY(-70deg);
	-ms-transform: rotateY(-70deg);
	transform: rotateY(-70deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.md-show.md-effect-8 .md-content {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 1;
}
</style>